<template>
  <view class="wrap">
    <view class="bottom-top">
    <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
    </view>
    <!-- 当前套餐 -->

    <view v-if="current === 0" style="margin-top: 80rpx;">
      <u-toast ref="uToast" />
      <u-picker mode="time" v-model="show" :params="params" @confirm="searchTime" @cancle="cancel"></u-picker>
      <u-form :model="form" class="apply-form-field">

        <u-gap height="20" bg-color="#f5f5f5"></u-gap>
        <u-form-item label="开始时间" label-width="150" right-icon="arrow-right">
          <u-input v-model="start" placeholder="请选择" type="select" class="form-field-select" @click="select('0')" />
        </u-form-item>
        <u-form-item label="结束时间" label-width="150" right-icon="arrow-right">
          <u-input v-model="end" placeholder="请选择" type="select" class="form-field-select" @click="select('1')" />
        </u-form-item>
        <u-gap height="20" bg-color="#f5f5f5"></u-gap>
        <u-form-item label="请假事由" label-width="150"></u-form-item>
        <u-form-item><u-input v-model="form.thing" type="textarea" placeholder="请输入内容" /></u-form-item>
        <u-gap height="20" bg-color="#f5f5f5"></u-gap>

        <u-form-item label="请假课程表" label-width="150"></u-form-item>
        <u-cell-item v-for="(item, index) in leaveList" :key="index" icon="order" :title="item.course"
          :iconStyle="{color: colorList()[1]}" :value="dates(item)"></u-cell-item>
        <u-gap height="20" bg-color="#f5f5f5"></u-gap>


        <u-gap height="20" bg-color="#f5f5f5"></u-gap>
        <u-form-item label="审批流程" label-width="150">
        </u-form-item>
        <u-form-item>
          <u-time-line>
            <u-time-line-item nodeTop="15">
              <!-- 此处自定义了左边内容，用一个图标替代 -->
              <template v-slot:node>
                <view class="u-node" style="background: #0190ef;">
                  <!-- 此处为uView的icon组件 -->
                  <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
                </view>
              </template>
              <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
              <template v-slot:content>
                <view>
                  <view class="u-order-title">审批人</view>
                </view>
              </template>
            </u-time-line-item>


            <u-time-line-item v-for="(item, index) in myTeacherSet" :key="index" nodeTop="2">
              <!-- 此处自定义了左边内容，用一个图标替代 -->
              <template v-slot:node>
                <view class="u-node" style="background: #ffffff;">
                  <!-- 此处为uView的icon组件 -->
                  <u-icon name="account-fill" :size="50"></u-icon>
                </view>
              </template>
              <!-- <template v-for="(item, index) in leaveList" :key="index" v-slot:content> -->
              <template v-slot:content>
                <view>
                  <view class="u-order-title">{{item.name}}({{item.course}})</view>
                  <!-- <view class="u-order-time">2019-05-08 12:12</view> -->
                </view>
              </template>
            </u-time-line-item>














            <u-time-line-item nodeTop="2">
              <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
              <template v-slot:node>
                <view class="u-node" style="background: #0190ef;">
                  <!-- 此处为uView的icon组件 -->
                  <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
                </view>
              </template>
              <template v-slot:content>
                <view class="u-order-title">抄送人</view>
              </template>

            </u-time-line-item>


            <u-time-line-item nodeTop="2">
              <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
              <template v-slot:node>
                <view class="u-node" style="background: #ffffff;">
                  <!-- 此处为uView的icon组件 -->
                  <u-icon name="account-fill" :size="50"></u-icon>
                </view>
              </template>
              <template v-slot:content>

                <view class="u-order-title">{{vuex_studentArray[0].name}}</view>

              </template>

            </u-time-line-item>
            


          </u-time-line>



        </u-form-item>


      </u-form>



      <u-row gutter="32" class="bottom-box" justify="center">
        <u-col span="10">
          <view><u-button type="primary" shape="circle" @click="submit()">确定</u-button></view>
        </u-col>
      </u-row>
      
      
    </view>
    <view v-if="current === 1" style="margin-top: 80rpx;" >
      <u-card    v-for="(item,index) in leaveMessageList"  :key="index" class="task-list-item" :border="false" padding="20" margin="20rpx">
        <view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
          <view style="display: flex;align-items: center;font-size: 30rpx;">
            <image class="user-images" src="/static/aidex/images/user06.png"></image>请假申请
          </view>
          <view style="color: #999999;font-size: 22rpx;">{{formatDate(item.createTime)}}</view>
        </view>
        <view class="" slot="body">
          <u-row gutter="16">
            <u-col span="12">
              <view class="apply-text"><span>假期类型：</span>事假</view>
            </u-col>
            <u-col span="12">
              <view class="apply-text"><span>开始时间：</span>{{formatTimeStamp(item.startTime)}}</view>
            </u-col>
            <u-col span="12">
              <view class="apply-text"><span>结束时间：</span>{{formatTimeStamp(item.endTime)}}</view>
            </u-col>
          </u-row>
        </view>
        
        <view class="apply-list-foot" slot="foot"  :style="{color: item.status  === 0  ? '#f28c03' : item.status  === 1 ?'#58ca93':'#ca243a',textAlign : 'right' }">
        <view style="display: flex;">
          <view class="back-today" style="flex: 1;" @click="navToLeave(item)">
            查看更多  
          </view> 
          <view style="flex: 1;">{{messageStatus(item.status)}}</view>
        </view>
          </view>

      </u-card>
      
      
     
      
      
      
      
      
      
      

    </view>

  </view>
</template>
<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        show: false,
        shows: true,
        slected: '',
        leaveMessageList : [],
        form: {
          startDate: '',
          endDate: '',
          startTime: '',
          endTime: '',
          thing: '',
          studentId: ''
        },
        message: {
          messageTitle: "2",
          info_content: "",
          sendId: '',
          teacherIds: '',
          startTime: '',
          endTime : '',
        },
        myTeacherSet: [],
        teachersList: '',
        start: '',
        end: '',

        leaveList: '',
        params: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: false
        },
        list: [{
          name: '发起申请'
        }, {
          name: '查看数据',
        }],
        m2mSimflowList: [],
        m2mOrderFlowList: [],
        current: 0,
        status: 'loadmore',
        iconType: 'circle',
        isDot: false,
        loadText: {
          loadmore: '点击加载更多',
          loading: '正在加载...',
          nomore: '没有更多了'
        },
      }
    },
    onLoad() {
      this.$u.api.StudentLeaveMessageList(
      {
        sendId : this.vuex_studentArray[0].id
      }
          ).then(res => {
            if (res.code == '200') {
                  this.leaveMessageList=res.data              
            }
      
      
          })
      
    },
    created() {},
    methods: {
      navToLeave(item){
       uni.navigateTo({
         url: '/pages/sys/workbench/details?data='+JSON.stringify(item)
       });
      },
      
      
      messageStatus(status){
        if(status == 0){
          return '待审核'
        }else if(status ==1){
          return '审核通过'
        }
        else if(status == 2 ){
          return '审核失败'
        }
        
      },
      formatDate(dateStr) {
        const da = moment(dateStr);
        const formatted = da.format('YYYY年MM月DD日');
        return formatted;
      },
      formatTimeStamp(dateStr) {
        const da = moment(dateStr);
        const formatted = da.format('YYYY年MM月DD日HH:mm');
        return formatted;
      },
      reset() {

        this.form = {
            startDate: '',
            endDate: '',
            startTime: '',
            endTime: '',
            thing: '',
            studentId: '',

          },

          this.message = {
            messageTitle: "2",
            messageContent: "",
            sendId: '',
            teacherIds: ''
          },
          this.start = ''
        this.end = ''
        this.leaveList = ''
        this.teachersList = ''
        this.myTeacherSet = []
      },
      submit() {
        if (this.start == '' || this.end == '') {
          this.$refs.uToast.show({
            title: '请选择时间日期',
            type: 'error',
          });
          return ''
        }
        if (moment(this.start, 'YYYY-MM-DD HH:mm').isAfter(moment(this.end, 'YYYY-MM-DD HH:mm'))) {
          this.$refs.uToast.show({
            title: '时间日期格式错误',
            type: 'error',
          });
          return ''
        }
        if (this.form.thing == '') {
          this.$refs.uToast.show({
            title: '请填写请假理由',
            type: 'error',
          });
          return ''
        }
        if (this.leaveList == '') {
          this.$refs.uToast.show({
            title: '请假日期无需上课',
            type: 'error',
          });
          return ''
        }
        this.message.info_content = this.form.thing
         this.message.startTime=this.start
         this.message.endTime=this.end
        this.message.sendId = this.form.studentId
        this.message.teacherIds = this.teachersList
        this.$u.api.addLeaveMessage(
          this.message
        ).then(res => {
          if (res.code == '200') {
            
    let msg = {
     	warningTypeStr: "通知消息",
     	projectName: "现在",
     	description: "请假成功",
       messageImage: ''
     };
    this.createAlarm(msg, res => {
     });

            
          }


        })


        // this.form.studentId = this.vuex_

        this.reset()

      },
      //返回颜色
      colorList() {
        return [
          "#000000", //0
          "#ffaa00", //1
          "#33CC99",
          "#ff5500", //3
          "#789262", //4
          "#66CCCC", //5
          "#9999FF", //6
        ]
      },
      select(e) {
        this.slected = e
        this.show = true
      },
      cancel() {
        if (this.slected == '0') {
          this.form.startDate = ''
          this.form.startTime = ''
          this.start = ''
        } else {
          this.form.endDate = ''
          this.form.endTime = ''
          this.end = ''
        }
        this.slected = ''

      },

      dates(item) {

        return item.claDate + ' ' + item.startTime + '-' + item.endTime

      },
      searchTime(e) {

        if (this.slected == '0') {
          this.form.startDate = e.year + '-' + e.month + '-' + e.day
          this.form.startTime = e.hour + ':' + e.minute
          this.start = this.form.startDate + ' ' + this.form.startTime
        } else {
          this.form.endDate = e.year + '-' + e.month + '-' + e.day
          this.form.endTime = e.hour + ':' + e.minute
          this.end = this.form.endDate + ' ' + this.form.endTime
        }
        // new Date(this.end.replace('T',' '))
        if (moment(this.start, 'YYYY-MM-DD HH:mm').isBefore(moment(this.end, 'YYYY-MM-DD HH:mm'))) {
          this.form.studentId = this.vuex_studentArray[0].id
          this.$u.api.leaveCourseList(this.form).then(res => {


            if (res.code == 200) {

              uni.showLoading({
                title: '加载中'
              });

              this.leaveList = res.data

              // 创建一个空的集合
              const mySet = new Set();
              this.myTeacherSet = [];
              for (let item of res.data) {
                mySet.add(item.teacherId)

                const a = {
                  course: item.course,
                  name: item.name
                }
                this.myTeacherSet.push(a);

              }
              let noRepeat = [...new Set(this.myTeacherSet.map(item => JSON.stringify(item)))];
              this.myTeacherSet = noRepeat.map(item => JSON.parse(item));
              this.teachersList = Array.from(mySet)
              uni.hideLoading();
            } else {
              uni.showToast({
                title: res.msg,
                duration: 2000
              });

            }







          })
        }
        this.slected = '0'





      },
      change(index) {
        this.current = index;
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      }
    }

  }
</script>
<style lang="scss" scoped>
  @import 'index.scss';

  page {
    background-color: #f5f5f5;
  }

  .u-node {
    width: 44rpx;
    height: 44rpx;
    border-radius: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d0d0d0;
  }

  .u-order-title {
    color: #333333;
    font-weight: bold;
    font-size: 32rpx;
  }

  .u-order-desc {
    color: rgb(150, 150, 150);
    font-size: 28rpx;
    margin-bottom: 6rpx;
  }

  .u-order-time {
    color: rgb(200, 200, 200);
    font-size: 26rpx;
  }

  .wrap .search {
    background: #ffffff;
  }

  .apply-text {
    font-size: 28rpx;
    color: #333333;

    span {
      color: #999999;
    }
  }
      .back-today {
        position: absolute;
        width: 120upx;
        height: 42upx;
        font-size: 25upx;
        text-align: center;
        color: #ffffff;
        border-radius: 15upx ;
        background-color: #FF6633;
        box-shadow: 1px 1px 5px red;
      }
  .user-images {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }

  .apply-list-foot {
    font-size: 28rpx;
  }

  .personnel-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .personnel-user {
      position: relative;
      margin: 5px 9px 0;
    }

    .user-images {
      width: 48px;
      height: 48px;
      margin-right: 0;

    }

    .iconfont {
      position: absolute;
      top: -12px;
      right: -5px;
      color: #FE0100;
    }
  }
</style>